<template>
	<view class="order-list">
		<view class="tab-header">
			<view :style="{ color: allTab === index ? t('color1') : '' }" v-for="(tab, index) in all" :key="index"
				class="all-tab-item" :class="{ active: allTab === index }" @tap="Tab(index)">
				{{ tab }}
				<view :style="{ backgroundColor: t('color1') }" class="active-curve"></view>
			</view>
		</view>
		<block v-if="allTab == 0">
			<view class="tab-header">
				<view :style="{ color: currentTab == index ? t('color2') : '' }" v-for="(tab, index) in tabs" :key="index"
					class="tab-item" :class="{ active: currentTab === index }" @tap="switchTab(index)">
					{{ tab }}
					<view :style="{ backgroundColor: t('color2') }" class="active-curve"></view>
				</view>
			</view>
			<scroll-view class="movie-list" scroll-y>
				<view v-if="datalist.length > 0">
					<view class="list-item" v-for="(item, index) in datalist" :key="index" @click="toDetail(item)">
						<view class="list-item-title">
							<view class="title-left">
								{{ item.cinemaName }}
							</view>
							<view class="title-right">
								{{ item.statustips }}
							</view>

						</view>
						<view class="list-item-content">
							<view class="detail-box">
								<image :src="item.product_pic" mode=""></image>
							</view>
							<view class="list-item-main">
								<view class="list-item-main-title">
									{{ item.titlearray[0] }}
								</view>
								<view class="list-item-main-date text-t">
									{{ item.titlearray[1] }}
								</view>
								<view class="list-item-main-date text-t">
									{{ item.titlearray[2] }} {{ item.titlearray[3] }}{{ item.titlearray[4] }}
								</view>

								<view class="list-item-main-seat text-t">
									{{ item.hallName }} {{ item.seats }}
								</view>
							</view>
							<view :style="{ backgroundColor: t('color1') }" class="btn" @click.stop="buy(item)"
								v-if="item.status === 0">
								<view class="btn-less">去支付</view>
							</view>
							<view :style="{ backgroundColor: t('color1') }" class="btn" @click.stop="btn(item)"
								v-if="item.status === 1">
								<view class="btn-less">出票</view>
							</view>
							<view :style="{ backgroundColor: t('color1') }" class="btn" @click.stop="btn(item)"
								v-if="item.status === 2">
								<view class="btn-less">查看</view>
							</view>
						</view>
						<view class="order-num">
							<text class="text-t">共{{ item.num }}张</text>
							<text class="text-s">总价￥</text>
							<text class="text-fs">{{ item.showPrice }}</text>


						</view>
						<view class="order-num">

							<block v-if="item.coupon_money !== null && item.coupon_money !== undefined">
								<text class="text-s">优惠价￥</text>
								<text class="text-fs" style="text-decoration: line-through">{{ item.coupon_money
									}}</text>
							</block>
							<text class="text-s">实付款￥</text>
							<text class="text-fs" :style="{ color: t('color1') }">{{ item.totalprice }}</text>

						</view>
						<view class="btn-cls" @click.stop="btnClose(item)" v-if="item.status === 0">
							<view class="btn-close">取消订单</view>
						</view>
						<view class="btn-cls" @click.stop="btnFun(item)"
							v-if="item.status === 1 && !item.refund_status">
							<view class="btn-close">申请售后</view>
						</view>
						<view class="btn-col" @click.stop="detail(item)" v-if="item.refund_status">
							<view class="btn-text">售后详情</view>
						</view>
					</view>
				</view>
				<view class="" v-else>
					<nodata></nodata>
				</view>
			</scroll-view>
		</block>
		<block v-if="allTab == 1">
			<view class="tab-header">
				<view :style="{ color: aTab == index ? t('color2') : '' }" v-for="(tab, index) in after" :key="index"
					class="all-tab-item" :class="{ active: aTab === index }" @tap="afterTab(index)">
					{{ tab }}
					<view :style="{ backgroundColor: t('color2') }" class="active-curve"></view>
				</view>
			</view>
			<scroll-view class="movie-list" scroll-y>
				<view v-if="refundlist.length > 0">
					<view class="list-item" v-for="(item, index) in refundlist" :key="index" @click="toRefund(item)">
						<view class="list-flex">
							<view class="list-t">
								订单信息
							</view>
							<view class="list-r" v-if="item.refund_status == 1">
								待审核
							</view>
							<view class="list-success" v-if="item.refund_status == 2">
								审核通过
							</view>
							<view class="list-r" v-if="item.refund_status == 3">
								驳回
							</view>
						</view>

						<view class="list-item-box">
							<view class="list-item-box-img">
								<image :src="item.orderinfo.product_pic" mode=""></image>
							</view>
							<view class="">
								<view class="list-item-title">
									<view class="title-left">
										<text>电影名称：</text> {{ item.orderinfo.titlearray[0] }}
									</view>
								</view>
								<view class="list-item-title">
									<view class="title-left">
										<text>座位信息：</text> {{ item.orderinfo.seats }}
									</view>
								</view>
								<view class="list-item-title">
									<view class="title-left">
										<text>退款金额：</text> {{ item.refund_money }}
									</view>
								</view>
								<view class="list-item-title"
									v-if="item.orderinfo.coupon_money !== null && item.orderinfo.coupon_money !== undefined">
									<view class="title-left">
										<text>优惠金额：</text> {{ item.orderinfo.coupon_money }}
									</view>
								</view>
								<view class="list-item-title">
									<view class="title-left">
										<text>退款理由：</text> {{ item.refund_reason }}
									</view>
								</view>
							</view>
						</view>

					</view>
				</view>
				<view class="" v-else>
					<nodata></nodata>
				</view>
			</scroll-view>
		</block>
		<!-- 遮罩层 -->
		<view v-if="showMask" class="mask"></view>

		<!-- 弹框 -->
		<view v-if="showMask" class="popup">
			<view class="popup-content">
				<view class="p-text">出票成功</view>
				<view class="">
					可点击图片放大查看
				</view>
				<view class="popup-box" v-for="(item, index) in orderimage">
					<image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image>
				</view>
				<view class="close" @click.stop="hideMask">关闭</view>
			</view>
		</view>
		<!-- 遮罩层 -->
		<view v-if="showMask2" class="mask"></view>

		<!-- 弹框 -->
		<view v-if="showMask2" class="popup">
			<view class="popup-content-tk">

				<form @submit="getTmplIds" @reset="formReset" report-submit="true">
					<!-- <view class="input-box">
						<input class="input" type="text" placeholder="请输入退款理由" placeholder-style="font-size:28rpx;color:#BBBBBB" name="refund_reason"
						 :value="refund_reason"></input>
					</view> -->
					<view class="form-item">
						<text class="label">退款原因</text>
						<view class="input-item"><textarea placeholder="请输入退款原因" placeholder-style="color:#999;"
								name="reason" @input="reasonInput"></textarea></view>
					</view>
					<view class="form-item flex-col">
						<view class="label">上传图片(最多三张)</view>
						<view id="content_picpreview" class="flex" style="flex-wrap:wrap;padding-top:20rpx">
							<view v-for="(item, index) in content_pic" :key="index" class="layui-imgbox">
								<view class="layui-imgbox-close" @tap="removeimg" :data-index="index"
									data-field="content_pic">
									<image src="/static/img/ico-del.png"></image>
								</view>
								<view class="layui-imgbox-img">
									<image :src="item" @tap="previewImage" :data-url="item" mode="widthFix"></image>
								</view>
							</view>
							<view class="uploadbtn"
								:style="'background:url(' + static_url + '/static/img/shaitu_icon.png) no-repeat 60rpx;background-size:80rpx 80rpx;background-color:#F3F3F3;'"
								@tap="uploadimg" data-field="content_pic" v-if="content_pic.length < 3"></view>
						</view>
					</view>
					<view class="btn-box">

						<view class="btn-left">
							<button class="confirm-btn-left" @click.stop="hideMask2">取消</button>
						</view>
						<view class="btn-right">
							<button class="confirm-btn" form-type="submit">确定</button>
						</view>

					</view>
				</form>

			</view>
		</view>
	</view>
</template>

<script>
var app = getApp()
export default {
	data() {
		return {
			all: ['电影订单', '售后订单'],
			tabs: ['全部', '待支付', '待出票', '已出票', '已取消'],
			after: ['全部', '待审核', '审核通过', '驳回'],
			currentTab: 0,
			allTab: 0,
			aTab: 0,
			showMask: false,
			showMask2: false,
			datalist: [],
			pagenum: 1,
			title: '',
			showTime: '',
			language: '',
			format: '',
			orderimage: [],
			refund_reason: '',
			currentOrder: null,
			content_pic: [],
			pre_url: '',
			refundlist: [],
			pagenum1: 1,
			static_url: app.globalData.static_url,
		}
	},
	onLoad() {
		this.getData()
		this.getRefund()
		this.pre_url = app.globalData.pre_url;
		this.static_url = app.globalData.static_url;
	},
	onPullDownRefresh() {
		this.getData(this.currentTab)
		this.getRefund(this.aTab)
	},
	onReachBottom() {
		this.getData(this.currentTab)
		this.getRefund(this.aTab)
	},
	methods: {
		toDetail(item) {
			uni.navigateTo({
				url: `/pagesZone/movie/order_detail?order_id=${item.order_id}`
			})
		},
		toRefund(item) {
			uni.navigateTo({
				url: `/pagesZone/movie/refund_detail?refund_order_id=${item.refund_order_id}`
			})
		},
		detail(item) {
			uni.navigateTo({
				url: `/pagesZone/movie/refund_detail?refund_order_id=${item.refund_order_id}`
			})
		},
		getData(status) {
			let statusFilter = -1;
			if (status === 1) {
				statusFilter = 0;
			} else if (status === 2) {
				statusFilter = 1;
			} else if (status === 3) {
				statusFilter = 2;
			} else if (status === 4) {
				statusFilter = 4;
			}
			app.showLoading('加载中...');
			app.get('film/orderlist', {
				status: statusFilter,
				page: this.pagenum,
				limit: 10
			}, (res) => {

				if (res.status === 200) {
					app.showLoading(false);
					if (this.pagenum === 1) {
						this.datalist = []
					}
					this.datalist = this.datalist.concat(res.data.orderList);
					this.pagenum++
				} else {
					app.showLoading(false);
					app.error(res.msg)
				}

			});
		},
		getRefund(status) {

			app.showLoading('加载中...');
			app.get('film/refundorderlist', {
				refund_status: this.aTab,
				page: this.pagenum1,
				limit: 10
			}, (res) => {

				if (res.status === 200) {
					app.showLoading(false);

					this.refundlist = this.refundlist.concat(res.data.orderList);

					this.pagenum1++
				} else {
					app.showLoading(false);
					app.error(res.msg)
				}

			});
		},
		Tab(index) {
			this.allTab = index
			if (index == 0) {
				this.pagenum = 1; // 重置页码为1
				this.datalist = []; // 清空现有数据
				this.getData(index); // 重新请求数据
			}
			if (index == 1) {
				this.pagenum1 = 1; // 重置页码为1
				this.refundlist = []; // 清空现有数据
				this.getRefund(index); // 重新请求数据
			}
		},
		afterTab(index) {
			this.aTab = index
			this.pagenum1 = 1; // 重置页码为1
			this.refundlist = []; // 清空现有数据
			this.getRefund(index); // 重新请求数据
		},
		// 切换标签
		switchTab(index) {
			this.currentTab = index
			this.pagenum = 1; // 重置页码为1
			this.datalist = []; // 清空现有数据
			this.getData(index); // 重新请求数据
		},

		btn(item) {
			app.showLoading('出票中...');
			app.get('film/getorderimage', {
				orderCode: item.orderCode
			}, (res) => {
				if (res.status === 200) {
					app.showLoading(false);
					this.orderimage = res.data.orderimage
					this.showMask = true;
				} else {
					app.showLoading(false);
					app.error(res.msg)
				}

			});

		},

		// 隐藏遮罩层和弹框
		hideMask() {
			this.showMask = false;
		},
		hideMask2() {
			this.showMask2 = false;
			this.currentOrder = null;
		},
		buy(item) {
			uni.navigateTo({
				url: `/pages/pay/pay?id=${item.payorderid}`
			})
		},
		btnFun(item) {
			this.showMask2 = true
			this.currentOrder = item;
		},
		reasonInput: function (e) {
			this.refund_reason = e.detail.value;

		},
		getTmplIds: function (e) {
			var that = this;
			that.loading = true;
			// #ifdef MP-WEIXIN
			app.get('Wxtmpl/getTmplIds', {
				type: 1
			}, function (res) {
				that.loading = false;

				var tmplIds = res.res;
				console.log(tmplIds);
				if (res.res) {

					wx.requestSubscribeMessage({
						tmplIds: tmplIds,
						complete(res, err) {
							that.onSubmit(e);
						}
					});

				} else {
					app.error(res);
					that.onSubmit(e);

				}
			});
			// #endif
			// #ifdef H5
			that.loading = false;
			that.onSubmit(e);
			// #endif
		},
		onSubmit: function (e) {
			var formdata = e.detail.value;

			let refund_reason = this.refund_reason

			let order_id = this.currentOrder.order_id
			let refund_money = this.currentOrder.totalprice

			let refund_pics = this.content_pic.join(",")

			if (refund_reason == '') {
				app.error('请输入退款理由');
				return;
			}

			app.get('film/createrefundorder', {
				order_id: order_id,
				refund_money: refund_money,
				refund_reason: refund_reason,
				refund_pics: refund_pics
			}, (res) => {
				if (res.status === 200) {

					app.success(res.msg)
					this.showMask2 = false
					this.currentOrder = null;
					this.pagenum = 1
					this.getData()
				} else {

					app.error(res.msg)
				}

			});
		},
		uploadimg: function (e) {
			var that = this;
			var field = e.currentTarget.dataset.field
			var pics = that[field]
			if (!pics) pics = [];
			app.chooseImage(function (urls) {
				for (var i = 0; i < urls.length; i++) {
					pics.push(urls[i]);
				}
			}, 1)
		},
		removeimg: function (e) {
			var that = this;
			var index = e.currentTarget.dataset.index
			var field = e.currentTarget.dataset.field
			var pics = that[field]
			pics.splice(index, 1)
		},
		btnClose(item) {
			app.showLoading('提交请求中...');
			app.get('film/cancelorder', {
				order_id: item.order_id
			}, (res) => {
				if (res.status === 200) {
					app.showLoading(false);
					uni.showToast({
						title: '订单取消成功！',
						icon: 'success',
						duration: 2000,
						success: () => {
							// const index = this.datalist.findIndex(order => order.order_id === item
							// 	.order_id);
							// if (index !== -1) {
							// 	this.datalist.splice(index, 1);
							// }
							this.pagenum = 1
							this.getData()
						}
					});
				} else {
					app.showLoading(false);
					app.error(res.msg)
				}

			});
		}
	}
}
</script>

<style>
.tab-header {
	display: flex;
	padding: 20rpx 0;
	border-bottom: 1rpx solid #eee;
}

.all-tab-item {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #666;
	position: relative;
}

.all-tab-item.active {
	color: #e64340;
	font-weight: bold;
}

.all-tab-item.active .active-curve {
	content: '';
	position: absolute;
	bottom: -20rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
}


.all-tab-item.active::after {
	content: '';
	position: absolute;
	bottom: -20rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	/* background: #e64340; */
}

.list-flex {
	display: flex;
	justify-content: space-between;
}

.list-r {
	color: #d70808;
}

.list-success {
	color: #76eb0f;
}

.tab-item {
	flex: 1;
	text-align: center;
	font-size: 28rpx;
	color: #666;
	position: relative;
}

.tab-item.active {
	color: #ff6b81;
	font-weight: bold;
}

.tab-item.active .active-curve {
	content: '';
	position: absolute;
	bottom: -20rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
}


.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: -20rpx;
	left: 50%;
	transform: translateX(-50%);
	width: 40rpx;
	height: 4rpx;
	/* background: #ff6b81; */
}

.movie-list {
	padding: 20rpx;
}

.list-item {
	background-color: #fff;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-bottom: 20rpx;
}

.list-t {
	font-weight: 700;
	margin-bottom: 20rpx;
}

.list-item-title {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;
}

.title-right {
	color: #ef155b;
}

.detail-box {
	width: 140rpx;
	height: 180rpx;
	border-radius: 20rpx;
	overflow: hidden;
}

.detail-box image {
	width: 100%;
	height: 100%;
}

.list-item-content {
	display: flex;
}

.list-item-main {
	margin-left: 20rpx;
	flex: 1;
}

.list-item-main-title {
	font-weight: bold;
}

.text-t {
	color: #888;
	margin-top: 10rpx;
}

.order-num {
	text-align: right;
}

.text-s {
	margin-left: 6rpx;
}

.text-fs {
	font-weight: 700;
	font-size: 36rpx
}

.btn {
	margin-left: 20rpx;
	margin-top: 40rpx;
	max-width: 160rpx;
	height: 60rpx;
	line-height: 60rpx;
	background: #ff4544;
	border-radius: 3px;
	text-align: center;
	padding: 0 20rpx;
}

.btn-less {
	height: 62rpx;
	line-height: 60rpx;
	font-size: 28rpx;
	color: #fff;

}

/* 遮罩层样式 */
.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	/* 半透明背景 */
	z-index: 999;
}

/* 弹框样式 */
.popup {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: white;
	padding: 20px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	z-index: 1000;
}

/* 弹框内容样式 */
.popup-content {}

.p-text {
	text-align: center;
	font-size: 24rpx;
	font-weight: 700;
	margin-bottom: 20rpx;
}

.close {
	padding: 10rpx 20rpx;
	background-color: #ef155b;
	color: white;
	border: none;
	border-radius: 5px;
	margin-top: 20rpx;
	text-align: center;
}

.popup-box {
	width: 400rpx;
	height: 700rpx;
	margin-top: 20rpx;
}

.popup-box image {
	width: 100%;
	height: 100%;
}

.btn-cls {
	margin-top: 10rpx;
	max-width: 160rpx;
	height: 60rpx;
	line-height: 60rpx;
	background: #d70808;
	/* border: 1px solid #d70808; */
	border-radius: 3px;
	text-align: center;
	padding: 0 20rpx;
}

.btn-col {
	margin-top: 10rpx;
	max-width: 160rpx;
	height: 60rpx;
	line-height: 60rpx;
	background: #fff;
	border: 1px solid #cdcdcd;
	border-radius: 3px;
	text-align: center;
	padding: 0 20rpx;

}

.btn-text {
	height: 62rpx;
	line-height: 60rpx;
	font-size: 28rpx;
	color: #333;
}

.btn-close {
	height: 62rpx;
	line-height: 60rpx;
	font-size: 28rpx;
	color: #fff;
}

.btn-box {
	display: flex;
	justify-content: space-between;
}

.input-box {
	margin: 20rpx 0;
}

.confirm-btn {
	color: #007aff;
}

.btn-left,
.btn-right {
	flex: 1;
	border: 1px solid #eee;
}

.btn-left {
	border-right: unset;
}

.layui-imgbox {
	margin-right: 16rpx;
	margin-bottom: 10rpx;
	font-size: 24rpx;
	position: relative;
}

.layui-imgbox-close {
	position: absolute;
	display: block;
	width: 32rpx;
	height: 32rpx;
	right: -16rpx;
	top: -16rpx;
	color: #999;
	font-size: 32rpx;
	background: #fff
}

.layui-imgbox-close image {
	width: 100%;
	height: 100%
}

.layui-imgbox-img {
	display: block;
	width: 200rpx;
	height: 200rpx;
	padding: 2px;
	border: #d3d3d3 1px solid;
	background-color: #f6f6f6;
	overflow: hidden
}

.layui-imgbox-img>image {
	max-width: 100%;
}

.layui-imgbox-repeat {
	position: absolute;
	display: block;
	width: 32rpx;
	height: 32rpx;
	line-height: 28rpx;
	right: 2px;
	bottom: 2px;
	color: #999;
	font-size: 30rpx;
	background: #fff
}

.uploadbtn {
	position: relative;
	height: 200rpx;
	width: 200rpx
}

.form-item {
	margin-bottom: 20rpx;
}

.form-item .input-item {
	width: 100%;
}

.form-item textarea {

	height: 200rpx;
	border: 1px #eee solid;
	padding: 20rpx;
}

.form-item input {
	width: 100%;
	border: 1px #f5f5f5 solid;
	padding: 10rpx;
	height: 80rpx
}

.list-item-box {
	display: flex;
}

.list-item-box-img {
	width: 140rpx;
	height: 180rpx;
	border-radius: 20rpx;
	overflow: hidden;
	margin-right: 20rpx;
}

.list-item-box-img image {
	width: 100%;
	height: 100%;
}

.title-left {
	flex: 1;
}
</style>